<template>
	<view :style="$theme.pageStyle">
		<view class="bg" :style="{'background-image': 'url('+ Bg +')'}">
			<view class="topbox">
				<view class="avatar_box">
					<view class="a_avatar">
						<image :src="User.avatar" mode="" class="b_avatar"></image>
					</view>
					<view class="a_nickname">
						<text class="b_nickname">{{User.nickname}}</text>
					</view>
				</view>
				<view class="title_box">
					<view class="title">
						<image src="http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2022/01/07/3971d47113e2c.png"
							alt="" />
						<text>{{$t('change.基本信息')}}</text>
					</view>
				</view>

				<view class="biaodan">
					<view class="title_s mg10">
						<text>{{$t('change.个人介绍')}}</text>
					</view>
					<view class="textbox mg10" style="background-color: #FFFFFF;">
						<textarea placeholder="请输入您的个人介绍，让我们更加了解您" class="content" v-model="jieshao">
						</textarea>
					</view>
				</view>

			</view>

			<view class="btn_box">

				<view class="title_box">
					<view class="title">
						<image src="http://tuchuangwng.oss-cn-beijing.aliyuncs.com/2022/01/07/f20e7a558649a.png"
							alt="" />
						<text>{{$t('change.联系方式')}}</text>
					</view>
				</view>

				<view class="biaodan">
					<view class="list">
						<view class="li-text">{{$t('change.姓名')}}</view>
						<view class="li-right">
							<input class="input" type="text" v-model="name" placeholder="请输入姓名" maxlength="20" />
						</view>
					</view>
					<view class="list mg10">
						<view class="li-text">{{$t('change.手机号')}}</view>
						<view class="li-right">
							<input class="input" type="text" v-model="phone" placeholder="请输入手机号" maxlength="20" />
						</view>
					</view>
				</view>

			</view>

		</view>

		<view class="b_botton">
			<view class="submit" @click="submit()">
				<text>{{$t('change.提交申请')}}</text>
			</view>
		</view>


	</view>

</template>

<script>
	import $H from '@/common/js/request.js';

	export default {

		data() {
			return {
				User: {},
				avatar: '',
				nickname: '',
				douyinhao: '',
				fans: '',
				name: '',
				phone: '',
				inventcode: '',
				jieshao: '',
				joinbg: '',
				legalcompany: '',
				switchVal: false,
				Bg: uni.getStorageSync('entryposter')
			}
		},

		onLoad() {

		},


		onShow() {
			this.getuser();
		},


		methods: {

			getconfig() {
				// this.joinbg = uni.getStorageSync('lawyer_join_bg')
			},

			check() {
				$H.post('v1.lawyer/checkapply', {}, {
					token: true
				}).then(res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages/lawyer/join_success'
						})
					}
				})
			},

			getuser() {
				this.$api.UserApi.index().then(res => {
					if (res.code == 1) {
						this.User = res.data
					}
				})
			},

			submit() {


				if (this.name == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写完整信息后提交'
					});
					return;
				}

				if (this.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写完整信息后提交'
					});
					return;
				}


				if (this.jieshao == '') {
					uni.showToast({
						icon: 'none',
						title: '请填写完整信息后提交'
					});
					return;
				}

				if (this.phone.length < 11) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					});
					return;
				}

				$H.post('lawyer/joinApply', {
					name: this.name,
					phone: this.phone,
					jieshao: this.jieshao,
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						uni.navigateTo({
							url: '/pages/lawyer/join_success'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})


			}



		}





	};
</script>

<style lang="scss" scoped>
	.mg10 {
		margin-top: 10px;
	}

	.bg {
		background-image: url('https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/uploads/images/20240328/20240328043614c31dc3779.jpg');
		background-size: 100%;
		height: 800px;
	}

	.b_botton {
		bottom: 0px;
		z-index: 10;
		position: fixed;
		display: flex;
		height: 80px;
		width: 100%;
		// padding-bottom: 20px;
		background: #FFFFFF;
		box-shadow: 0px 5px 51px 0px rgb(0 102 188 / 48%);
		border-radius: 8px 8px 0px 0px;
	}

	.submit {
		width: 80%;
		height: 50px;
		margin-top: 10px;
		margin-left: 10%;
		background: var(--color-primary);
		border-radius: 30px;
		text-align: center;
	}

	.submit text {
		color: #FFFFFF;
		font-size: 18px;
		font-weight: 500;
		line-height: 50px;
	}

	.topbox {
		height: 460px;
		background-color: #FFFFFF;
		width: 90%;
		margin-left: 5%;
		top: 50px;
		position: absolute;
		border-radius: 20px;
	}

	.a_avatar {
		width: 100%;
	}

	.b_avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin: 0 auto;
		display: flex;
		margin-top: 10px;
	}

	.a_nickname {
		width: 100%;
		text-align: center;
		margin-top: 10px;
	}

	.b_nickname {
		font-size: 18px;
		font-weight: 500;
	}

	.title_box {
		display: flex;
		height: 30px;
		width: 90%;
		margin: 0 auto;
		margin-top: 20px;
	}

	.title {
		height: 30px;
		display: flex;
	}

	.title image {
		width: 30px;
		height: 30px;
	}

	.title text {
		height: 30px;
		margin-left: 10px;
		line-height: 30px;
		font-size: 18px;
		font-weight: 500;
	}

	.biaodan {
		padding: 20px;
	}

	.list {
		display: flex;
		height: 40px;
		background: #f5f5f5;
		padding: 5px 15px;
		border-bottom: 1px solid #F2F2F2;
		border-radius: 15px
	}

	.li-text {
		width: 20%;
		height: 100%;
		float: left;
		color: #555555;
		;
		font-size: 14px;
		line-height: 30px;
		border-right: #E3E3E3 1px solid;
	}

	.li-right,
	.li-right1 {
		width: 80%;
		height: 100%;
		float: left;
	}

	.input {
		height: 30px;
		color: #808080;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
	}

	.title_s {}

	.title_s {
		font-size: 14px;
		font-weight: 400;
		color: #555555;
	}

	.btn_box {
		height: 180px;
		background-color: #FFFFFF;
		width: 90%;
		margin-left: 5%;
		top: 540px;
		position: absolute;
		border-radius: 20px;
	}

	.checkbox_group {
		width: 100%;
	}


	.textbox {
		width: 95%;
	}

	.content {
		width: 100%;
		background: #F5F5F5;
		border-radius: 12px;
		font-size: 14px;
		padding: 10px;
	}
</style>